<template>
  <div>
    <p class="title">推荐歌单</p>
    <div>
      <van-row gutter="5">
        <van-col span="8" v-for="obj in list" :key="obj.id">
          <van-image fit="cover" :src="obj.picUrl" />
          <p class="song_name">{{ obj.name }}</p>
        </van-col>
      </van-row>
    </div>
    <p class="title">最新音乐</p>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list2" :key="item.id"  >
              <template>
              <div class="song_item_wrap">
                <div class="song_left">
                  <p>{{item.name}}</p>
                  <p>
                    <span>{{item.song.artists[0].name}} - </span>
                    <span>{{item.song.album.name}}</span>
                  </p>
                </div>
                <div class="song_right">
                  <i class="iconfont icon-bofang"></i>
                </div>
              </div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { recommendSongList ,newSong} from "@/api";
export default {
  data() {
    return {
      list: [],
       list2: [],
      loading: false,
      finished: false,
    };
  },
    methods: {
    onLoad() {
      // 异步更新数据
      this.getNewSongFn()
    },
     async getNewSongFn(){
     const res2 = await newSong({
      limit:10
    })
    this.list2 = res2.data.result
    this.finished = true //首页不加载更多(直接显示10个就可以了)
  },
  },
  async created() {
    const res = await recommendSongList();
    // console.log(res);
    this.list = res.data.result;
  },
};
</script>

<style scoped>
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0.266667rem;
}

/*歌单样式*/  
.song_item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 歌曲列表 */
.song_right {
  padding-right: 0.266667rem;
  line-height: 1.066667rem;
}

/* 歌曲_名字 */
.song_left {
  width: 8rem;
}
.song_left p:first-child {
  font-size: 0.453333rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song_left p:last-child {
  font-size: 0.32rem;
  color: #888;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放图标 */
.song_right i {
  display: inline-block;
  transform: scale(1.3);
}
</style>